<template>
  <div class="dialogBox">
    <el-dialog v-model="dialogVisible" :title="title" width="30%">
      <el-form ref="ruleFormRef" :model="form1" label-width="130" size="default">
        <el-form-item label="模型执行包：" prop="attachUrl">
          <div class="model-check-box">
            <el-input v-model="attachUrl" :disabled="true" />
            <el-button type="primary" @click="handleModelDonload" v-if="attachUrl">下载</el-button>
          </div>
        </el-form-item>
        <div class="model-check-box-bottom">
          <el-form-item label="模型验证结果：" prop="modelDesc">
            <div class="model-check-result">{{ modelCheckResult }}</div>
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleModelCheck">验证</el-button>
          <el-button @click="handleCancel">取 消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, defineExpose } from 'vue'
import { getModelDetails, modelVerifyResult } from '@/services/modules/home'

const modelId = ref('')
const title = ref('模型验证')
const Loading = ref(false)
const modelCheckResult = ref('')

let form1 = reactive({
  attachUrl: ''
})
const attachUrl = ref('')
const ruleFormRef = ref(null)
const dialogVisible = ref(false)
const handleModelCheck = async () => {
  // Loading.value = true
  // modelCheckResult.value = ''
  // setTimeout(() => {
  //   modelCheckResult.value = '模型验证成功！！'
  //   Loading.value = false
  // }, 3000)

  Loading.value = true
  const result = await modelVerifyResult({ modelId: modelId.value })

  if (result.code == 200) {
    Loading.value = false
    modelCheckResult.value = result.msg

    return
  } else {
    Loading.value = false
    modelCheckResult.value = ''
  }
}
// 模型执行包下载
const handleModelDonload = () => {
  let a = document.createElement('a')
  a.href = attachUrl.value
  // a.download = '副本雨量数据模板.xlsx'
  a.click()
}
const handleOpenModal = (item) => {
  modelCheckResult.value = ''
  modelId.value = item.id
  dialogVisible.value = true
  // form1.attachUrl = url
  getModelDetails({
    modelId: item.id
  }).then((res) => {
    if (res.code === 200) {
      attachUrl.value = res.data.attachUrl
      // modelId.value = res.data.id
    }
  })
}
const handleCancel = () => {
  dialogVisible.value = false
}

defineExpose({ handleOpenModal })
</script>

<style lang="less" scoped>
.dialogBox {
  box-sizing: border-box;
  :deep(.el-dialog__body) {
    // padding-bottom: 0;
    height: 150px;
  }
  .el-dialog__header {
    border-bottom: 1px solid rgb(14, 13, 13);
  }

  .el-button--primary {
    margin-left: 20px;
    background-color: rgba(22, 155, 213, 1);
  }
  .model-check-box {
    display: flex;
  }
  .model-check-result {
    color: green;
  }
  .model-check-box-bottom {
    // display: flex;
    // align-items: center;
    height: 100px;
    margin-bottom: 10px;
  }
}
</style>
